<template>
    <div class="app-container">
      <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="" >
          <el-input placeholder="场景名称" v-model="form.sceneName" />
        </el-form-item>
        <!-- <el-form-item label="" >
          <el-input placeholder="参数代号" v-model="form.person" />
        </el-form-item> -->
        <el-form-item label="" >
          <el-input placeholder="参数名称" v-model="form.parmName" />
        </el-form-item>
        <el-form-item label="" >
          <el-button size="mini" @click="search" icon="el-icon-search">查询</el-button>
          <el-button size="mini" @click="search(1)" icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="场景名称">
          <template slot-scope="scope">
            {{ scope.row.sceneName }}
          </template>
        </el-table-column>
        <el-table-column label="参数代号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.parmCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参数值" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.parmData }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参数名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.parmName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="200">
          <template slot-scope="scope">
            
            <el-button class="detail" @click="curve(scope.row)"><img src="../../assets/img/watch.svg" />曲线</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible" :modal="false" width="800px">
      <div
        id="echart" style="width: 90%; height: 400px;margin: 0 auto" >
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { sceneTestParmRecord } from '@/api/table'
  import { getHistoryParmList } from '@/api/form'
  import * as echarts from "echarts"
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        form: {},
        list: null,
        listLoading: true,
        form: {
       },
      currentPage: 1,
        pageNum: 10,
        total: 0,
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      init(xdata, ydata) {
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            show: false,
            textStyle: {
              left: 2,
              color: "#ffffff",
              fontSize: 14,
            },
          },
          backgroundColor: "transparent",
          grid: {
            top: "15%",
            left: "15%",
            right: "10%",
            bottom: "20%",
            // containLabel: true
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: "#8C9493",
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "rgba(255, 255, 255, 0.8)",
                  // padding: this.WidthAdaptive(2),
                },
                formatter: function (data) {
                  return data;
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#192a44",
                },
              },
              axisTick: {
                show: false,
              },
              data: xdata,
            },
          ],
          yAxis: [
            {
              name: "曲线",
              nameTextStyle: {
                color: " rgba(255, 255, 255, 0.6)",
                // fontSize: this.WidthAdaptive(10),
              },
              splitLine: {
              show: true,
              lineStyle: {
                color: "#2F83F7",
                type: "dashed", //虚线
                // width: 2
              },
            },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#8C9493",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "rgba(255, 255, 255, 0.8)",
                  // padding: this.WidthAdaptive(2),
                },
              },
              axisTick: {
                show: false,
              },
              
            },
          ],
          series: [
            {
              name: "参数值",
              type: "line",
              symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: false,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                normal: {
                  // width: this.WidthAdaptive(3),
                  color: "rgba(24,187,157,1)", // 线条颜色
                },
                borderColor: "rgba(0,0,0,.4)",
              },
              itemStyle: {
                color: "rgba(24,187,157,1)",
                // borderWidth: this.WidthAdaptive(20),
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(24,187,157,.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(24,187,157, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
                  // shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: ydata,
            },
          ],
        };
        var myChart = echarts.init(document.getElementById("echart"));
        // 绘制图表
        myChart.setOption(option)
      },
      curve(row) {
        this.dialogFormVisible = true
        getHistoryParmList({
          childNodeId: row.childNodeId,
          parmId: row.parmId,
        }).then(res => {
          console.log(res)
          this.init(res.data.Time, res.data.Data)
        })
      },
      search(num) {
        if (num==1) {
          this.form = {}
        }
        this.currentPage = 1
        this.fetchData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    handleSizeChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      fetchData() {
        sceneTestParmRecord({pageSize:this.pageNum,
          pageNum: this.currentPage,
          ...this.form
            }).then(res => {
        this.list = res.rows
        this.total = res.total
        this.listLoading = false
            })
      }
    }
  }
  </script>
  